Day24 - 資料儲存與更新(01) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 11 屆 iThome 鐵人賽

DAY 24

自我挑戰組

JavaScript 新手筆記系列第 24 篇

Day24 - 資料儲存與更新(01)

11th鐵人賽 javascript

hokou

2019-10-09 23:19:21

1264 瀏覽

分享至

前言

今天來說明將資料進行儲存的方法

localStorage

localStorage = 本機端儲存
- 將資料儲存在瀏覽器，因為存在本機的電腦上，因此關閉視窗或是開多個視窗都還可以儲存
- 跟 sessionStorage (連線時儲存)比剛好相反，關閉視窗就失效了
- 可參考：Cookie、LocalStorage、SessionStorage 差異
chrome 的檢查 (F12)，選 Application (若沒有可能在 >> 內)，左方的 Storage 內可以找到 Local Storage

localStorage.setItem(key , value);：用來儲存，前面是 Key，後面為值
localStorage.getItem(key);：用來呼叫，利用 Key 來將對應的值取出

index.html

<body class="body">
    <div>
        <ul class="list">
            <li>請輸入姓名：<input type="text" class="name"><input type="button" value="儲存" class="savename"></li>
            <input type="button" value="呼叫" class="callname">
            <li>我的名字是：<b id="myname"></b></li>
        </ul>
    </div>
    <script src="JS/test.js"></script>
</body>

test.js

// 儲存內容至 localStorage
var elsave = document.querySelector(".savename");

function savename(e){
    var str = document.querySelector(".name").value;
    // console.log(str);
    localStorage.setItem('name', str);
}

elsave.addEventListener('click',savename);

// 從 localStorage 呼叫內容
var elcall = document.querySelector(".callname");
var myname = document.querySelector("#myname");

function callname(e){
    var str = localStorage.getItem('name');
    // console.log(str);
    myname.innerHTML = str;
};

elcall.addEventListener('click',callname);

顯示結果如下，可進行儲存與呼叫

儲存物件

儲存在 localStorage 裡面儲存的值皆為字串( string )，因此若要儲存陣列，需要轉換格式
JSON.stringify()：將 JS 的物件陣列轉換成 JSON 的字串
JSON.parse()：將 JSON 的字串轉換成 JS 的物件陣列

var data = [
    {
    Site: "崙背",
    county: "雲林縣",
    PM25: "51",
    },
    {
    Site: "富貴角",
    county: "新北市",
    PM25: "7",
    }
]

// 將陣列轉成字串後存入
var datastring = JSON.stringify(data);
// 將字串存入
localStorage.setItem('PM2.5', datastring);

// 將存入的值取出
var getdata = localStorage.getItem('PM2.5');
// 將值轉回陣列
var dataarray = JSON.parse(getdata);

console.log(dataarray[0].county);  // 顯示 雲林縣
console.log(dataarray[1].PM25);  // 顯示 7